import React, { memo, useEffect } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";

import AppCarousel from "../../conptonents/app-carousel";
import CategoryBar from "@/conptonents/category-bar/index"
import RoomItem from "../../conptonents/room-item";
import { fetchHomeDataAction } from "../../store/modules/home";
import { HomeWrapper } from "./style";
import SectionTabs from "../../conptonents/section-tabs";
import { Affix, Col, Row } from "antd";
import ScrollView from "../../base-ui/scroll-view";

const Home = memo(() => {
  // 从state获取数据
  const { addressList, categoryList, productList } = useSelector((state) => {
    return {
      addressList: state.home.addressList,
      categoryList: state.home.categoryList,
      productList: state.home.productList
    };
  }, shallowEqual);

  console.log(productList);

  // 派发异步事件，发送网络请求
  const dispath = useDispatch();

  useEffect(() => {
    dispath(fetchHomeDataAction());
  }, [dispath]);

  if (addressList != undefined && categoryList !== undefined && productList != undefined) {
    return (
      <HomeWrapper>
        <div className="section-carousel">
          <AppCarousel></AppCarousel>
        </div>

        <div className="content-wrap">
          <div className="sectionHeader">
            <h2>探索全球超 400 万独特房源</h2>
          </div>


          <div className="tab-list">
            <SectionTabs className="tab-list-tabs" list={addressList}></SectionTabs>
          </div>

          <Affix offsetTop={80}>
            <div className="category-list">
              <ScrollView>
                <CategoryBar list={categoryList}></CategoryBar>
              </ScrollView>
            </div>
          </Affix>

          <Row gutter={18} className="section-main">
            {productList.map((item) => {
              return (
                <Col span={6} key={item.id}>
                  <RoomItem
                    itemWidth={"100%"}
                    itemHeight={"300px"}
                    itemData={item}
                  ></RoomItem>
                </Col>
              );
            })}
          </Row>
        </div>
      </HomeWrapper>
    );
  }
});

export default Home;
